<template>
  <div class="pop">
    <van-search
      v-model="seachVal"
      show-action
      shape="round"
      placeholder="请输入搜索的内容"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <!-- @input="onInput"当输入框发生变化的时候触发函数 -->
    <Hot v-if="blockShow==1" :host="host"></Hot>
    <SeachList v-else-if="blockShow==2" :searc="searc"></SeachList>
    <SearchProduct v-else></SearchProduct>
  </div>
</template>
<script>
import Hot from "@/components/Hot"
import SeachList from "@/components/SeachList"
import SearchProduct from "@/components/SearchProduct" //引入组件
export default {
  data(){
    return{
      //用户搜索的文字
      seachVal:"",
      /**
       * 值可以为1,2,
       * 1为历史记录
       * 2为展示搜索的内容
       */
      //占位符文本
       blockShow:1,
       //热门搜索的数据
       host:["糖醋排骨","海参","皮蛋","家常菜","年夜饭","烤羊排"],
       //搜索提示数据
       searc:[]
    }
  },
  created(){
    //获取弹出框的数据
    this.axios.get("/popu").then((res)=>{
      if(res.code=="200")
        console.log(res.data)
        //  this.host= res.data.results.title;
    }) 
  },
    methods: {
    onSearch(val) {//onSearch用户回车搜索的时候执行，val就是用户输入的值
      this.blockShow=3;//点击回车出现详细列表
      console.log(val);
    },
    onCancel() {
      this.$router.go(-1)//点击取消返回上一级
    },
    onInput(val){
      //当搜索框获取焦点时进行切换到下一个页面展示数据
      this.blockShow=2;
      console.log(val)
      //发送请求
      this.axios.get("/popu",{params:{title:val}}).then((res)=>{
        console.log(res)
        let obj=res.data.results;
        obj.forEach(item=>{
          console.log(obj);
          // this.searc=res.data.results;
          this.searc.push(item.title)
        })
        
        console.log(this.searc)
      })
     
    },
  },
  components:{
    Hot,//注册组件
    SeachList,
    SearchProduct 
  }
};
</script>
<style scoped>
.pop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #efefef;
}
</style>